<template>
  <el-container>
    <el-header>
      <fheader></fheader>
    </el-header>
    <el-container>
      <el-aside width="600px">
        <el-aside class="left" width="250px" style="background-color: #fff;border-radius:6px;">
          <el-menu :router="true" :default-active="$route.path" background-color="#00000000" text-color="#000" active-text-color="#000">
            <!-- <el-submenu index="1">
              <template slot="title">
                <span>首页</span>
              </template> -->
            <!-- </el-submenu> -->
            <el-menu-item index="/index/introduce/historyIntroduce">百年温岭</el-menu-item>
            <el-menu-item index="/index/introduce/famous">温岭名人</el-menu-item>
            <el-menu-item index="/index/introduce/culturalHeritage">文化遗产 </el-menu-item>
            <el-menu-item index="/index/introduce/villageHistory">村史村情 </el-menu-item>

          </el-menu>
        </el-aside>
      </el-aside>
      <el-main style="height:600px;" class="right">
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
  import fheader from "@/components/Header.vue";
  export default {
    components: {
      fheader,
    },
    data() {
      return {
        activeIndex: '/admin/index',
      }
    },
    created() {
      this.setCurrentRoute();
    },
    watch: {
      $route() {
        this.setCurrentRoute();
      }
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
      setCurrentRoute() {
        this.activeIndex = this.$route.path; // 通过他就可以监听到当前路由状态并激活当前菜单
      },
      back() {
        this.$router.push({
          path: "/login",
          // query: { id: id },
        })
      }
    }
  }

</script>

<style lang="scss" scoped>
  >>>.el-header {
    padding: 0;
  }

  >>>.el-main {
    padding: 0;
    margin: 50px 200px 0 0;
    height: 600px;
    background: white;
  }

  .left {
    margin: 50px 0 0px 200px;
    height: 600px;
  }
.el-menu-item.is-active {
      background-color: rgba(1, 149, 51, .5) !important;
    }
    .el-menu-item:hover {
      background-color: rgba(1, 149, 51, .2) !important;
    }
  .right::-webkit-scrollbar {
    width: 4px;
    /*height: 4px;*/
  }

  .right::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: rgba(0, 0, 0, 0.2);
  }

  .right ::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 0;
    background: rgba(0, 0, 0, 0.1);

  }

</style>
